<template>
  <a-modal
    :title="modalTitle"
    :width="1100"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" style="max-height: 500px;overflow-y: auto;overflow-x: hidden;">
        <extend-strategy ref="extendStrategy" />
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {saveStrategy,queryStrategy,clearStrategy } from '@/api/site/category'
import pick from 'lodash.pick'
import ExtendStrategy from '@/components/ExtendModel/ExtendStrategy.vue'
export default {
  components: {
    ExtendStrategy
  },
  data () {
    return {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 13
        }
      },
      categoryId:'',
      modalTitle: '',
      modalOpera: 0, // 0：新增 1：编辑
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  created () {},
  mounted () {},
  methods: {
    add (record) {
      this.modal('新建栏目策略', 0)
      const _this = this
      this.categoryId = record.id
      setTimeout(function () {
        _this.setCategoryId(record.id)
        _this.queryStrategys(record.id)
      }, 300)
    },
    queryStrategys(categoryId){
       queryStrategy({categoryId:categoryId}).then(response=>{
           if(response.code===0){
              this.setDataSource(response.res)
           }
       })
    },
    clearStrategys(categoryId){
      clearStrategy({categoryId:categoryId}).then(response=>{
          this.message(response)
      })
    },
    modal (title, opera) {
      this.modalTitle = title
      this.modalOpera = opera
      this.visible = true
    },
    handleSubmit () {
     const fields = this.getDataSource()
     const _this = this
     if (fields.length === 0) {
       _this.$confirm({
         title: '操作提醒',
         content: '确定要不设置任何策略吗?',
         onOk () {
           _this.clearStrategys(_this.categoryId)
         },
         onCancel () {}
       })
     }else{
       saveStrategy(fields).then(response=>{
          this.message(response)
       })
     }
    },
    message (response) {
      if (response.code === 0) {
        this.$message.info(response.msg)
        this.$emit('ok')
        this.handleCancel()
      } else {
        this.$message.error(response.msg)
      }
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.clearDataSource()
    },
    setDataSource (datas) {
       if (datas) {
          this.$refs.extendStrategy.setDataSource(datas)
       } 
    },
    getDataSource () {
      return this.$refs.extendStrategy.getDataSource()
    },
    setCategoryId(categoryId){
      return this.$refs.extendStrategy.setCategoryId(categoryId)
    },
    clearDataSource () {
      this.categoryId = ''
      this.$refs.extendStrategy.clearDataSource()
    }
  }
}
</script>
